// pinia 是用vue3 来代替vuex的一个解决方案
// 他的语法可以使用vue3的组合式api来完成
// 特别适合vue3的组合式写法 模块化开发
// pinia 只有三个属性 state getters actions
// 比vuex 少了 mutations和module
// pinia 可以完整 任意组件传值
import { ref, computed } from 'vue'
// npm i pinia
// pinia的写法1 
import { defineStore } from 'pinia'

// 定义一个仓库
// defineStore("唯一标识", {})
// 专门用来管理 num这个state数据
// defineStore("名字", {}, )
export let numStore = defineStore('num', {
  state: () => { //pinia定义state
    return {
      num: 1,
      test: 188
    }
  },
  getters: {
    douNum (state) { //计算属性
      return state.num * 3
    }
  },
  actions: {
    add (cou) {
      // this.num 代替了以前的state.num cou就是传来的数据
      this.num += cou
    }
  },
  persist: { //配置持久化属性
    enabled: true,
    path: ["num"] //规定具体的字段持久化
  }

})

// 管理token的pinia
export let tokenStore = defineStore('token', {
  state: () => {
    return {
      token: "dahafsdafafsafasdf"
    }
  },
  getters: {
    tokens: state => "Bearer " + state.token
  },
  actions: {
    setToken (token) {
      this.token = token
    }
  }
})
// pinia的写法2 
// 用vue3的语法 来代替state actions 和getters
export let userNameStore = defineStore("userName", () => {
  let userName = ref("张三")//ref来代替state

  // computed 计算属性代替getters配置项
  let douName = computed(() => {
    return "他的名字是:" + userName.value
  })
  // 用函数来代替actions配置项
  let setName = (name) => {
    userName.value = name
  }
  return { userName, douName, setName } // return出去

}, {
  persist: { //配置持久化属性
    enabled: true
  }
})